<script lang="tsx">
import { defineComponent } from 'vue';
import { $t } from '#/locales';
import type { PropType } from 'vue';
import ObsImage from '#/components/obsImage.vue';
import type { CourseInfo } from '#/api/course';

export default defineComponent({
  name: 'CourseCard',
  props: {
    course: {
      type: Object as PropType<CourseInfo>,
      required: true
    },
    // 卡片类型，支持扩展不同类型的卡片
    cardType: {
      type: String as PropType<'course' | 'video' | 'article'>,
      default: 'course'
    },
    // 是否显示播放按钮
    showPlayButton: {
      type: Boolean,
      default: true
    },
    // 是否显示标签
    showTag: {
      type: Boolean,
      default: true
    },
    // 自定义点击事件
    onClick: {
      type: Function as PropType<(course: CourseInfo) => void>,
      default: undefined
    }
  },
  setup(props) {
    const handleClick = () => {
      if (props.onClick) {
        props.onClick(props.course);
      }
    };

    return () => (
      <div
        class="bg-white rounded-[16px] overflow-hidden cursor-pointer flex flex-col justify-between"
        onClick={handleClick}
      >
        <div class="relative p-[8px] pb-0">
          <ObsImage
            src={props.course.icon}
            alt={props.course.name}
            imgStyle={{ height: '148px' }}
            showPreview={false}
          />
        </div>

        <div>
          {/* 标题 */}
          <h3 class="text-[18px] leading-[26px] text-[#191919] my-[16px] mx-[12px]">
            <el-tooltip
              content={props.course.name}
              placement="bottom"
              disabled={false}
              showAfter={200}
            >
              <span class="inline-block max-w-[100%] overflow-hidden text-ellipsis whitespace-nowrap">
                {props.course.name}
              </span>
            </el-tooltip>
          </h3>

          {/* 章节信息和人数信息 */}
          <div class="flex items-center justify-between text-[14px] leading-[22px] text-[#AEAEAE] mb-[16px] mx-[16px]">
            <span class="flex items-center">
              {props.course.chapterCount}{$t('course.chapterUnit')}
              {props.course.totalSections}{$t('course.sectionUnit')}
            </span>
            <span class="flex items-center">
              {props.course.studyCount}{$t('course.studyingCount')}
            </span>
          </div>

          {/* 分割线 */}
          <div class="border-t border-gray-200"></div>

          {/* 类别信息 */}
          <div class="text-[14px] text-[#595959] w-full px-[16px] pt-[14px] pb-[12px] overflow-hidden text-ellipsis whitespace-nowrap">
            {props.course.subjectFullPath}
          </div>
        </div>
      </div>
    );
  }
});
</script>

<style lang="less" scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.async-image {
  :deep(.el-image) {
    border-radius: 8px;
  }
}
</style>
